<template>
  <el-dialog
    width="1000px"
    :title="dataForm.id ? '编辑' : '添加'"
    :visible.sync="visible"
    :show-close="true"
  >
    <el-form
      ref="dataForm"
      v-loading="commonLoading"
      :model="dataForm"
      :rules="dataRule"
      size="small"
      label-position="right"
      label-width="100px"
      :element-loading-text="loadingText"
    >
      <el-form-item label="学校名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="请输入学校名称" />
      </el-form-item>
      <el-form-item label="学校名称韩文" prop="nameEn">
        <el-input v-model="dataForm.nameEn" placeholder="请输入学校名称韩文" />
      </el-form-item>
      <el-form-item label="学校地区" prop="areaCode">
        <el-select
          v-model="dataForm.areaCode"
          filterable
          placeholder="请选择地区"
        >
          <el-option
            v-for="item in areaList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学校logo" prop="logoUrl">
        <el-col :span="11">
          <el-input
            v-model="dataForm.logoUrl"
            placeholder="请输入或上传学校logo"
          />
        </el-col>
        <el-col :span="11">
          <ul class="uploaderList">
            <li v-if="dataForm.logoUrl">
              <img :src="dataForm.logoUrl" style="width: 100%">
              <div class="BtnBox">
                <i
                  class="el-icon-view"
                  style="margin-right: 15px"
                  @click="viewPic"
                />
                <i class="el-icon-delete" @click="dataForm.logoUrl = ''" />
              </div>
            </li>
            <li v-if="!dataForm.logoUrl">
              <el-upload
                ref="uploadLogo"
                action="string"
                :http-request="uploadLogo"
                :show-file-list="false"
              >
                <div class="avatar-uploader">
                  <i class="el-icon-plus avatar-uploader-icon" />
                </div>
              </el-upload>
            </li>
          </ul>
        </el-col>
      </el-form-item>
      <el-form-item label="直播时间" prop="registeredDate">
        <el-date-picker
          v-model="dataForm.registeredDate"
          type="datetime"
          placeholder="选择直播时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="视频主图地址">
        <el-col :span="11">
          <el-input
            v-model="dataForm.imgUrls"
            placeholder="请输入或上传学校logo"
          />
        </el-col>
        <el-col :span="11">
          <ul class="uploaderList">
            <li v-if="dataForm.imgUrls">
              <img :src="dataForm.imgUrls" style="width: 100%">
              <div class="BtnBox">
                <i
                  class="el-icon-view"
                  style="margin-right: 15px"
                  @click="viewPic2"
                />
                <i class="el-icon-delete" @click="dataForm.imgUrls = ''" />
              </div>
            </li>
            <li v-if="!dataForm.imgUrls">
              <el-upload
                ref="uploadLogo2"
                action="string"
                :http-request="uploadLogo2"
                :show-file-list="false"
              >
                <div class="avatar-uploader">
                  <i class="el-icon-plus avatar-uploader-icon" />
                </div>
              </el-upload>
            </li>
          </ul>
        </el-col>
      </el-form-item>
      <el-form-item label="直播回放地址">
        <el-input
          v-model="dataForm.videoUrl"
          placeholder="请输入直播回放地址"
        />
      </el-form-item>
      <el-form-item label="招生简章">
        <el-col :span="11">
          <el-input v-model="dataForm.contacts" placeholder="请上传招生简章" />
        </el-col>
        <el-col :span="11">
          <ul class="uploaderList">
            <li v-if="dataForm.contacts">
              <!-- <img :src="dataForm.contacts" style="width: 100%"> -->
              文件
              <div class="BtnBox">
                <i
                  class="el-icon-view"
                  style="margin-right: 15px"
                  @click="viewPic3"
                />
                <i class="el-icon-delete" @click="dataForm.contacts = ''" />
              </div>
            </li>
            <li v-if="!dataForm.contacts">
              <el-upload
                ref="uploadFiles"
                action="string"
                :http-request="uploadFiles"
                :show-file-list="false"
              >
                <div class="avatar-uploader">
                  <i class="el-icon-plus avatar-uploader-icon" />
                </div>
              </el-upload>
            </li>
          </ul>
        </el-col>
      </el-form-item>

      <el-form-item label="直播地址">
        <el-input v-model="dataForm.websiteUrl" placeholder="请输入直播地址" />
      </el-form-item>
      <!-- <el-form-item label="联系人">
        <el-input v-model="dataForm.contacts" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="dataForm.telephone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input v-model="dataForm.email" placeholder="请输入邮箱地址" />
      </el-form-item>

      <el-form-item label="学校地址">
        <el-input v-model="dataForm.address" placeholder="请输入学校地址" />
      </el-form-item> -->

      <!-- <el-form-item label="学校简介" prop="intro">
        <el-input v-model="dataForm.intro" type="textarea" />
      </el-form-item> -->

      <el-form-item label="学校介绍" prop="intro2">
        <vue-neditor-wrap
          v-model="dataForm.intro2"
          :config="myConfig"
          :destroy="false"
          @ready="ready"
        />
      </el-form-item>
      <el-form-item label="专业介绍" prop="intro">
        <vue-neditor-wrap
          v-model="dataForm.intro"
          :config="myConfig"
          :destroy="false"
          @ready="ready"
        />
      </el-form-item>
      <el-form-item label="校园环境" prop="address">
        <vue-neditor-wrap
          v-model="dataForm.address"
          :config="myConfig"
          :destroy="false"
          @ready="ready"
        />
      </el-form-item>
      <el-form-item label="排序" prop="seq">
        <el-input-number v-model="dataForm.seq" style="width: 50%" />
      </el-form-item>
      <el-form-item label="是否上架">
        <el-radio-group v-model="dataForm.auditStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="submitBtn" @click="dataFormSubmit()">确认</div>
    </el-form>
  </el-dialog>
</template>

<script>
import VueNeditorWrap from 'vue-neditor-wrap'
import { updateSchoolList, uploadFile, foreachAreaList } from '@/api/school'
import { baseUrl } from '@/utils/config'
export default {
  components: { VueNeditorWrap },
  data() {
    return {
      areaList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      baseUrls: baseUrl + '/sys/upload',
      editorInstance: null,
      visible: false,
      commonLoading: false,
      loadingText: '数据正在提交...',
      dataForm: {
        id: '',
        registeredDate: '',
        websiteUrl: '',
        address: '',
        areaCode: '',
        contacts: '',
        email: '',
        intro: '',
        seq: 0,
        countryCode: '',
        name: '',
        nameEn: '',
        intro2: '',
        logoUrl: '',
        telephone: '',
        auditStatus: 1,
        videoUrl: '', //  回放地址
        imgUrls: '' // 视频图
      },
      dataRule: {
        areaCode: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        name: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        logoUrl: [
          { required: true, message: '请上传学校logo', trigger: 'blur' }
        ],
        registeredDate: [
          { required: false, message: '请选择直播时间', trigger: 'blur' }
        ],
        intro: [{ required: true, message: '请输入学校简介', trigger: 'blur' }],
        intro2: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      myConfig: {
        // 如果需要上传功能,找后端小伙伴要服务器接口地址
        serverUrl: baseUrl + '/sys/upload',
        // 你的UEditor资源存放的路径,相对于打包后的index.html
        UEDITOR_HOME_URL: '/NEditor/',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 关闭自动保存
        enableAutoSave: false,
        // 拉升缩放
        imageScaleEnabled: false,
        default: ''
      }
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    getAreaList() {
      const data = {
        page: this.page,
        pageSize: 50,
        areaName: this.title
      }
      foreachAreaList(data).then((response) => {
        if (response && response.code === 1) {
          this.areaList = response.data.list
        }
      })
    },
    viewPic() {
      window.open(this.dataForm.logoUrl, 'newW')
    },
    viewPic2() {
      window.open(this.dataForm.imgUrls, 'newW')
    },
    viewPic3() {
      window.open(this.dataForm.contacts, 'newW')
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    ready(editorInstance) {
      this.editorInstance = editorInstance
    },
    // 上传配图
    uploadLogo(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.loadingText = '正在上传...'
      this.commonLoading = true
      uploadFile(formData).then((response) => {
        if (response && response.code === 1) {
          this.$message({
            type: 'success',
            duration: 50,
            message: '上传成功',
            onClose: () => {
              this.dataForm.logoUrl = response.data
              this.commonLoading = false
            }
          })
        } else {
          console.info(1111)
          this.commonLoading = false
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    // 上传配图
    uploadLogo2(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.loadingText = '正在上传...'
      this.commonLoading = true
      uploadFile(formData).then((response) => {
        if (response && response.code === 1) {
          this.$message({
            type: 'success',
            duration: 50,
            message: '上传成功',
            onClose: () => {
              this.dataForm.imgUrls = response.data
              this.commonLoading = false
            }
          })
        } else {
          this.commonLoading = false
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    // 上传配图
    uploadFiles(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.loadingText = '正在上传...'
      this.commonLoading = true
      uploadFile(formData).then((response) => {
        if (response && response.code === 1) {
          this.$message({
            type: 'success',
            duration: 50,
            message: '上传成功',
            onClose: () => {
              this.dataForm.contacts = response.data
              this.commonLoading = false
            }
          })
        } else {
          console.info(1111)
          this.commonLoading = false
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    init(item) {
      this.dataForm.id = null
      this.dataForm.nameEn = ''
      this.dataForm.address = ''
      this.dataForm.name = ''
      this.dataForm.contacts = ''
      this.dataForm.email = ''
      this.dataForm.intro = ''
      this.dataForm.seq = 0
      this.dataForm.telephone = ''
      this.dataForm.intro2 = ''
      this.dataForm.countryCode = ''
      this.dataForm.logoUrl = ''
      this.dataForm.auditStatus = 1
      this.dataForm.registeredDate = ''
      this.dataForm.videoUrl = ''
      this.dataForm.websiteUrl = ''
      this.dataForm.areaCode = ''
      this.dataForm.imgUrls = ''
      if (item) {
        this.dataForm.id = item.id
        this.dataForm.nameEn = item.nameEn
        this.dataForm.address = item.address
        this.dataForm.name = item.name
        this.dataForm.contacts = item.contacts
        this.dataForm.email = item.email
        this.dataForm.intro = item.intro
        this.dataForm.seq = item.seq
        this.dataForm.telephone = item.telephone
        this.dataForm.intro2 = item.intro2
        this.dataForm.countryCode = item.countryCode
        this.dataForm.logoUrl = item.logoUrl
        this.dataForm.auditStatus = item.auditStatus
        this.dataForm.registeredDate = item.registeredDate
        this.dataForm.videoUrl = item.videoUrl
        this.dataForm.websiteUrl = item.websiteUrl
        this.dataForm.areaCode = item.areaCode
        this.dataForm.auditStatus = item.auditStatus
        this.dataForm.imgUrls = item.imgUrls
      }
      this.visible = true
    },
    // 表单提交
    dataFormSubmit() {
      console.info(this.dataForm.intro2)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingText = '数据正在提交...'
          this.commonLoading = true
          // const data = {
          //   address: this.dataForm.address,
          //   id: this.dataForm.id,
          //   intro: this.dataForm.intro,
          //   name: this.dataForm.name,
          //   intro2: this.dataForm.intro2,
          //   countryCode: this.dataForm.countryCode,
          //   contacts: this.dataForm.contacts,
          //   logoUrl: this.dataForm.logoUrl,
          //   telephone: this.dataForm.telephone,
          //   email: this.dataForm.email,
          //   auditStatus: this.dataForm.auditStatus,
          //   seq: this.dataForm.seq,
          //   nameEn: this.dataForm.nameEn,
          //   registeredDate: this.dataForm.registeredDate
          // }

          updateSchoolList(this.dataForm).then((response) => {
            if (response && response.code === 1) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 100,
                onClose: () => {
                  this.visible = false
                  this.commonLoading = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.commonLoading = false
              this.$message.error(response.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.el-loading-mask {
  z-index: 999999999999999999 !important;
}

.avatar {
  width: 35px;
  height: 35px;
  display: block;
}
</style>
<style lang="scss" scoped>
.uploaderList {
  padding: 0;
  margin: 0;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 80px;
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    img {
      max-width: 148px;
      max-height: 148px;
    }
    .BtnBox {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      font-size: 15px;
      display: none;
    }
  }
}
.uploaderList li:hover .BtnBox {
  display: inline-block;
}
</style>
<style lang="scss" scoped>
.el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 0 60px 30px;
}
.dialog-title {
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 20px;
  .title {
    flex: 1;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }
  .closeBtn {
    width: 30px;
    height: 30px;
  }
}

.leftContent {
  flex: 1;
  .tips {
    line-height: 40px;
  }
}
.submitBtn {
  width: 320px;
  height: 40px;
  cursor: pointer;
  background: #2884ec;
  border-radius: 20px;
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  margin: 30px auto 10px;
}
</style>
